<template>
	<view class="center">
		<view class="detail">
			<image :src="detailList.goods_image" mode="widthFix"></image>
		</view>
		<view class="price">
			<text class="price_new">￥{{detailList.price}}</text>
			<text class="price_old">￥{{detailList.oldprice}}</text>
			<text class="price_title">{{detailList.title}}</text>
			<text class="price_info">{{detailList.title_f}}</text>
			<view class="info" v-html="detailList.content">
			</view>
		</view>
		<view class="shopping">
			<image src="../../static/images/s42.png" mode="widthFix" @tap='shop'></image>
			<text @tap='shopping'>加入购物车</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				detailList:{}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.details()
		},
		methods: {
			details(){
				this.$ajax(
				this.apiList.details,
				{
					id:this.id
				},
				'POST'
				).then(res=>{
					this.detailList = res.data
				})
			},
			shopping(){
				this.$ajax(
				this.apiList.cart,
				{
					gid:this.id
				},
				'POST',
				).then(res=>{
				this.$sToast(res.msg)
				})
			},
			shop(){
				uni.switchTab({
					url:'../cart/cart'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.center{
	.detail{
		width: 100%;
		box-sizing: border-box;
		image{
			width: 100%;
		}
	}
	.price{
		width: 100%;
		box-sizing: border-box;
		padding: 20upx;
		display: flex;
		flex-direction: column;
		text{
			font-size:40upx;
			font-family:PingFang SC;
			font-weight:400;
		}
		.price_new{
			color: red;
		}
		.price_old{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color: rgba(158, 158, 158, 1);
			text-decoration: line-through;
		}
		.price_title{
			font-size:32upx;
			font-family:PingFang SC;
			font-weight:400;
			color: rgba(97, 97, 97, 1);
		}
		.price_info{
			font-size:24upx;
			font-family:PingFang SC;
			font-weight:500;
			color: rgba(189, 189, 189, 1);
		}
		.info{
			margin: 20upx auto;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.shopping{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		image{
			width: 90upx;
		}
		text{
			display: inline-block;
			width: 200upx;
			height: 64upx;
			border-radius: 10upx;
			background: rgba(139, 221, 142, 1);
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color: #fff;
			text-align: center;
			line-height: 64upx;
		}
		
	}
}
</style>
